<!-- 时间预约插件 -->
<!-- @auto:Nxiang -->
<template>
	<view class="index">
		<view class="page">
			<scroll-view class="weekSelection" scroll-x >
					<view :class="weekcheck == index ? 'weekSelectionBoxOn' : 'weekSelectionBox'" v-for="(item,index) in week" @click="bbb(index)">
						<view class="week">{{item.name}}</view>
						<view class="date">{{item.date}}</view>
					</view>
			</scroll-view>
		</view>
		<view class="checkbtn">
			<view class="check"style="background-color: #dedede;">不可预约</view>
			<view class="check" style="background-color: #007AFF; color: #FFFFFF;">可预约</view>
			<view class="check" style="background-color: #83DC42; color: #FFFFFF;">您已预约</view>
			<!-- <view class="check" style="background-color: #4CD964; color: #FFFFFF;">他人已预约</view> -->
		</view>
		<view class="page"  style="height: 800rpx;">
			<scroll-view class="dateSelection" scroll-y>
					<view :class="item.isCan == 5 ? 'dateSelectionBoxOn' : item.isCan == 1 || item.isCan == 4 ?'dateSelectionBoxOff':item.isCan == 2 ?'dateSelectionBoxYou':item.isCan == 3?'dateSelectionBoxThem':'dateSelectionBox' " v-for="(item,index) in date" @click="aaa(index)" >{{bookdate(item.startTime)}}</view>
			</scroll-view>
		</view>
		<view class="btn">
			<view class="btnqx" @click="btn(1)">取消</view>
			<view class="btnqd" @click="btn(2)">确定</view>
		</view>
	</view>
	
</template>

<script>
export default {
	components:{
	},

	data() {
		return {
			items:[],
			weekcheck:0,
			week:[
				{
					name:"周一",
					date:"8/1",
				},
				{
					name:"周二",
					date:"8/1",
				},
				{
					name:"周三",
					date:"8/1",
				},
				{
					name:"周四",
					date:"8/1",
				},
				{
					name:"周五",
					date:"8/1",
				},
				{
					name:"周六",
					date:"8/1",
				},
				{
					name:"周日",
					date:"8/1",
				}
			],
			checkBox1:[],
			checkBox:[],
			date:[],
			dataPickerValue: (new Date()).valueOf(), //当前时间
			timeLists:[]
		};
	},
	
	
	computed: {
	    // 计算属性的 getter
	    bookdate() {
		   return function (date) {
			   //console.log(date)
			   if(!this.dateType || this.dateType == 0){
				   if(date == 0){
					   return "0:00"
					}
				   return this.dateconversion(date,"t").slice(0,5)
			   }else{
				   return date
			   }
		            
		    }
		  console.log(this.date);
	    },
		
	},
	props:['timeList','dateType','startTime'],
	mounted() {
		this.date = this.timeList
		if(this.dateType && this.startTime){
			this.dataPickerValue=new Date(this.startTime).getTime();
		}
		if(!this.dateType && this.startTime){
			this.dataPickerValue=parseInt(this.startTime)
		}
		if(this.date){
			this.numberCyclesCorrespondingDate()
		}
		
	},
	onLoad: function (option) {
		console.log(1);
	
	},
	methods:{
	
		
		numberCyclesCorrespondingDate(){
			var that = this
			for(let i = 0;i < 7 ;i++){
				this.week[i].name = this.transferDateWeek(this.dataPickerValue+i*24 * 3600 * 1000)
				this.week[i].date = this.dateconversion(this.dataPickerValue+i*24 * 3600 * 1000,"ms","/")
				this.week[i].dateall = this.dateconversion(this.dataPickerValue+i*24 * 3600 * 1000,"yms","-")
			}
		},
		
		transferDateWeek(date){
			var weekDay = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
			        var myDate = new Date(date);
			        return weekDay[myDate.getDay()]; 
		},
		
		showPicker(){
			this.$refs.picker.show();
		},
		aaa(index){
			
			if(this.date[index].isCan == 0){
				this.date[index].isCan = 5
			}else if(this.date[index].isCan == 5){ 
				this.date[index].isCan = 0
			}
			//console.log(this.date);
			 //console.log(this.date[index].isCan);
			this.$emit('timeDate',this.week[index])
			
			this.$emit('timeStatus',this.week[index])
		},
		bbb(index){
			var that = this;
			this.weekcheck = index;
			let dates = new Date()
			let year = dates.getFullYear();
			let month = dates.getMonth() + 1;
			let date = dates.getDate();
			let day = dates.getDay();
			let hour = dates.getHours();
			let min = dates.getMinutes();
			// let allda
			//console.log(startTime);
			
			console.log(this.week[index].dateall);
			this.$emit('checkDate',this.week[index])
		},
		btn(count){
			if(count == 1){
				this.$emit('showClose')
				return
			}
			var obj = []
			
			var selectTime = this.week[this.weekcheck]
			for (var i = 0; i < this.date.length; i++) {
				if(this.date[i].isCan == 5){
					
					//obj.push( this.date[i] )
					//console.log(i);
					obj.push(i)
				}
				
			}
			// var arr=Array(1,2,3);
			// arr.push(4);
			//console.log(selectTime);
			var timedata={
				time:obj,
				date:selectTime
			}
			
			this.$emit('showTime',timedata)
			
		},
		
		// 自定义时间格式方法
		dateconversion(time,format,split){
			if(!split){
				split = "/"
			}
			var returndate = ""
			time = parseInt(time)
			//console.log(time)
			// console.log(new Date(time + 8 * 3600 * 1000))
			if(new Date(time + 8 * 3600 * 1000) == "Invalid Date"){
				return "无效时间戳"
			}
			var date = new Date(time + 8 * 3600 * 1000).toJSON().substr(0, 19).replace('T', '-').split('-')
			var datex = {
				y:date[0],
				m:date[1],
				s:date[2],
				t:date[3],
			}
			var formatarr = format.split("")
			for(let i = 0;i<formatarr.length;i++){
				if(i == 0){
					returndate = datex[formatarr[i]]
				}else{
					returndate = returndate+split+datex[formatarr[i]]
				}
			}
			return returndate;
		}
	},
	watch:{
		timeList:function(){
			//console.log("------------------------------------")
			this.date = this.timeList
			
			//console.log(this.date)
		}
	}
	
};
</script>

<style>
	.dateSelection{
		display: flex;
		/* width: 100%; */
		/* flex-wrap: wrap; */
		margin: 0 auto;
		height: 650rpx;

		
	}
	.weekSelection{
	  width: 100vw;
      height: 150rpx;
	  overflow:hidden;
	  white-space:nowrap;
	  padding-top: 20rpx;
	  background-color: #dadada;
		/* flex-direction: column; */
		/* flex-wrap: wrap; */
	}
	.weekSelectionBox{
		display: inline-flex;
		border-radius: 10rpx;
		border: #007AFF solid 2rpx;
		width: 130rpx;
		margin: 20rpx;
		height: 100rpx;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		background-color: #FFFFFF;
	}
	.weekSelectionBoxOn{
		display: inline-flex;
		border-radius: 10rpx;
		border: #007AFF solid 2rpx;
		width: 130rpx;
		margin: 20rpx;
		height: 100rpx;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		background-color: #4B93FF;
		color: #FFFFFF;
	}
	.dateSelectionBox{
		display: inline-flex;
		border-radius: 10rpx;
		border: #007AFF solid 2rpx;
		width: 20%;
		margin: 15rpx;
		height: 100rpx;
		justify-content: center;
		align-items: center;
		background-color: #FFFFFF;
	}
	.dateSelectionBoxOn{
		display: inline-flex;
		border-radius: 10rpx;
		border: #007AFF solid 2rpx;
		background-color: #007AFF;
		color: #FFFFFF;
		width: 20%;
		margin: 15rpx;
		height: 100rpx;
		justify-content: center;
		align-items: center;
	}
	.dateSelectionBoxOff{
		display: inline-flex;
		border-radius: 10rpx;
		border: #dedede solid 2rpx;
		width: 20%;
		margin: 15rpx;
		height: 100rpx;
		justify-content: center;
		align-items: center;
		color: #ebebeb;
		background-color: #dedede;
	}
	.dateSelectionBoxYou{
		display: inline-flex;
		border-radius: 10rpx;
		border: #dedede solid 2rpx;
		width: 20%;
		margin: 15rpx;
		height: 100rpx;
		justify-content: center;
		align-items: center;
		color: #FFFFFF;
		background-color: #83DC42;
	}
	.dateSelectionBoxThem{
		display: inline-flex;
		border-radius: 10rpx;
		border: #dedede solid 2rpx;
		width: 20%;
		margin: 15rpx;
		height: 100rpx;
		justify-content: center;
		align-items: center;
		color: #FFFFFF;
		background-color:#4CD964;
	}
	.btn{
		margin-top: 50rpx;
		width: 100%;
		height: 100rpx;
		bottom: 0;
		position: absolute;
		display: flex;
	}
	.btnqx{
		flex: 1;
		justify-content: center;
		align-items: center;
		background-color: #FFFFFF;
		display: flex;
	}
	.btnqd{
		flex: 1;
		justify-content: center;
		align-items: center;
		background-color: #2979FF;
		color: #FFFFFF;
		display: flex;
	}
	.checkbtn{
		display: flex;
		width: 100%;
	}
	.check{
		flex: 1;
		height: 50rpx;
		justify-content: center;
		align-items: center;
		margin: 10rpx;
		display: flex;
	}
</style>
